<template>
  <view class="label">
    <view
      v-for="(item, index) in labelData"
      :key="index"
      class="label_item"
      :style="{
        color: item.colorCode,
        backgroundColor: colorHextoRGB(item.colorCode),
        // border: '1px solid ' + item.colorCode,
      }"
      >{{ item.name }}</view
    >
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, watch, ref } from "vue";
import { getGoodsTag } from "@/utils/api";

const props = defineProps({
  ids: {
    type: Array,
    default: () => [],
  },
});

watch(
  () => props.ids,
  () => {
    ids.value = props.ids;
    getGoodsTagFn();
  }
);
const ids = ref();
const labelData = ref([]);

onBeforeMount(() => {
  ids.value = props.ids;
  getGoodsTagFn();
});

async function getGoodsTagFn() {
  let { code, data } = await getGoodsTag({});
  if (code == 200) {
    labelData.value = [];
    data.list.forEach((item) => {
      if (ids.value.includes(String(item.id))) {
        labelData.value.push(item);
      }
    });
  }
}

function colorHextoRGB(val) {
  let color = val;
  var t = {},
    bits = color.length == 4 ? 4 : 8, //假设是shorthand。 #fff, 那么bits为4位, 每一位代表的个属性, 其他的为8位 每两位代表一个属性 #ffffff00
    mask = (1 << bits) - 1; //表示字节占位符。 向左移4位或8位，var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111。或者 8位的 1111 1111
  color = Number("0x" + color.substr(1)); //#ff0000 转变为16进制0xff0000;
  if (isNaN(color)) {
    return null; // Color
  }
  ["b", "g", "r"].forEach(function (x) {
    var c = color & mask;
    color >>= bits;
    t[x] = bits == 4 ? 17 * c : c; // 0xfff ， 一个f应该代表 255, 应该当[0-255]，按15等份划分，每一等份间隔 17。 所以获得的值须要乘以17, 才干表示rgb中255的值
  });
  // 这里的a可以自己给值，0-1,给1就是直接rgb颜色值了，给小数就是rgba的颜色值了
  t.a = 0.1;
  // console.log('t', t);
  const rgba = "rgba(" + t.r + "," + t.g + "," + t.b + "," + t.a + ")";
  return rgba; // Color
}
</script>

<style lang="scss" scoped>
.label {
  display: flex;
  flex-wrap: wrap;
  // height: 110rpx;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.label_item {
  height: 30rpx;
  align-items: center;
  line-height: 30rpx;
  font-size: 20rpx;
  padding: 6rpx 20rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}
</style>
